import * as React from 'react';
import Box from '@/commonComponents/box/index';
import customerServiceImage from '@/imgs/service.png';
import mySelfPng from '../../assets/Images/service/customerImg.png';
import './index.module.scss';
const { memo } = React;

interface ChatBoxProps {
  conversition?: any[];
  isLoading?: boolean;
  sender: any;
  revicer: any;
}

function ChatBox(props: ChatBoxProps, ref: any) {
  const { conversition = [], sender } = props;
  return (
    <Box data={[1]} isLoading={false} styleName="chatBox-box">
      <div styleName="chatBox" ref={ref}>
        {conversition.length &&
          conversition.map((item, index) => {
            let content = null;
            // <!-- Identity 1 机器人，2 在线客服 3 客户 -->
            // <!--  type:【0:文本】 【1:图片】 【2:表情】 【3:商品卡片/订单卡片】  -->
            if (item.Identity === 3) {
              content = (
                <div styleName="myselfDiv">
                  {item.Type === 0 && (
                    <div styleName="myselfContent">{item.Content}</div>
                  )}
                  {item.Type === 1 && (
                    <img
                      styleName="mineSendImage"
                      // @load="loadOverImg"
                      // preview="1"
                      src={item.Content}
                    />
                  )}
                  {item.Type === 2 && (
                    <div styleName="myselfContent">
                      <img src={item.Content} />
                    </div>
                  )}
                  <div styleName="myselfImage">
                    {/* <img src={myselfImage} /> */}
                    <img src={mySelfPng}></img>
                  </div>
                </div>
              );
              // <!-- 机器人发过来的信息，并且是文字 -->
            } else if (item.Identity === 2) {
              content = (
                <div styleName="customerServiceDiv">
                  <div styleName="customerServiceImage">
                    <img src={customerServiceImage} />
                  </div>
                  {item.Type === 1 && (
                    <img
                      styleName="customer-mineSendImage"
                      // @load="loadOverImg"
                      // preview="1"
                      src={item.Content}
                    />
                  )}
                  {item.Type === 2 && (
                    <img
                      src={item.Content}
                      styleName="customer-mineSendImage"
                    />
                  )}
                  {item.Type === 0 && (
                    <div
                      styleName="otherContent"
                      dangerouslySetInnerHTML={{ __html: item.Content }}
                    ></div>
                  )}
                </div>
              );
            } else {
              content = (
                <div styleName="otherDiv">
                  <span>{item.Content}</span>
                </div>
              );
            }
            return (
              <div id="ChatContent" styleName="chatContent" key={index}>
                {content}
              </div>
            );
          })}
      </div>
    </Box>
  );
}

export default memo(React.forwardRef(ChatBox));
